<template>
  <div class="promotion-card bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl hover:-translate-y-2 group relative">
    <!-- Promotion type badge -->
    <div class="absolute top-4 right-4 z-10">
      <div :class="typeBadgeClass" class="px-3 py-1 rounded-full text-xs font-bold text-white shadow-lg">
        {{ typeLabel }}
      </div>
    </div>

    <!-- Status badge -->
    <div class="absolute top-4 left-4 z-10">
      <div :class="statusBadgeClass" class="px-3 py-1 rounded-full text-xs font-bold shadow-lg">
        {{ statusText }}
      </div>
    </div>

    <!-- Card header with gradient background -->
    <div :class="headerGradientClass" class="p-6 text-white relative overflow-hidden">
      <div class="absolute inset-0 bg-black bg-opacity-10"></div>
      <div class="relative z-10">
        <h3 class="text-xl font-bold mb-2 line-clamp-2">{{ promotion.promName }}</h3>
        <p class="text-sm opacity-90">{{ promotion.billCode }}</p>
        <div class="flex items-center mt-3 text-sm">
          <el-icon class="mr-1"><Clock /></el-icon>
          <span>{{ formatDateRange(promotion.startTime, promotion.endTime) }}</span>
        </div>
      </div>
      
      <!-- Decorative elements -->
      <div class="absolute -top-4 -right-4 w-24 h-24 bg-white bg-opacity-10 rounded-full"></div>
      <div class="absolute -bottom-2 -left-2 w-16 h-16 bg-white bg-opacity-10 rounded-full"></div>
    </div>

    <!-- Card content -->
    <div class="p-6">
      <!-- Combo promotion content -->
      <div v-if="promotion.promType === 'TC'" class="space-y-4">
        <div class="flex items-center justify-between mb-4">
          <span class="text-sm text-gray-600">套餐商品</span>
          <span class="text-lg font-bold text-purple-600">
            ¥{{ totalPrice }}
            <span class="text-sm text-gray-500 line-through ml-2">¥{{ originalPrice }}</span>
          </span>
        </div>
        
        <div class="grid grid-cols-2 gap-3">
          <div v-for="item in promotion.details.slice(0, 4)" :key="item.id" class="flex items-center space-x-2">
            <img 
              :src="item.goodsInfo.mainPic || '/images/no.jpg'" 
              :alt="item.goodsInfo.title"
              class="w-12 h-12 object-cover rounded-lg border border-gray-200"
            />
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium text-gray-800 truncate">{{ item.goodsInfo.title }}</p>
              <p class="text-xs text-gray-500">x{{ item.num }}</p>
            </div>
          </div>
        </div>
        
        <div v-if="promotion.details.length > 4" class="text-center">
          <span class="text-sm text-gray-500">还有 {{ promotion.details.length - 4 }} 个商品...</span>
        </div>
      </div>

      <!-- Seckill promotion content -->
      <div v-else-if="promotion.promType === 'MS'" class="space-y-4">
        <div v-for="item in promotion.details.slice(0, 2)" :key="item.id" class="flex items-center space-x-4 p-3 bg-red-50 rounded-lg">
          <img 
            :src="item.goodsInfo.mainPic || '/images/no.jpg'" 
            :alt="item.goodsInfo.title"
            class="w-16 h-16 object-cover rounded-lg"
          />
          <div class="flex-1">
            <h4 class="font-medium text-gray-800 mb-1">{{ item.goodsInfo.title }}</h4>
            <div class="flex items-center space-x-2">
              <span class="text-lg font-bold text-red-600">¥{{ item.seckillPrice }}</span>
              <span class="text-sm text-gray-500 line-through">¥{{ item.goodsInfo.price }}</span>
            </div>
            <div class="flex items-center mt-1">
              <span class="text-xs text-gray-600">库存: <span :class="getStockStatusClass(item.seckillStorNum)">{{ getStockStatusText(item.seckillStorNum) }}</span></span>
              <span class="text-xs text-gray-600 ml-3">限购: {{ item.seckillNum }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Full reduction promotion content -->
      <div v-else-if="promotion.promType === 'MJ'" class="space-y-4">
        <div v-for="item in promotion.details" :key="item.id" class="p-4 bg-green-50 rounded-lg border border-green-200">
          <div class="flex items-center justify-between">
            <div>
              <span class="text-lg font-bold text-green-600">满 ¥{{ item.taxAmount }}</span>
              <span class="text-gray-600 mx-2">减</span>
              <span class="text-lg font-bold text-red-600">¥{{ item.dedRate }}</span>
            </div>
          </div>
          <p class="text-sm text-gray-600 mt-2">{{ item.description }}</p>
        </div>
      </div>

      <!-- Buy gift promotion content -->
      <div v-else-if="promotion.promType === 'MZ'" class="space-y-4">
        <div v-for="item in promotion.details.slice(0, 2)" :key="item.id" class="space-y-3">
          <div class="flex items-center space-x-4 p-3 bg-blue-50 rounded-lg">
            <div class="flex items-center space-x-2">
              <img 
                :src="item.goodsInfo.mainPic || '/images/no.jpg'" 
                :alt="item.goodsInfo.title"
                class="w-12 h-12 object-cover rounded-lg"
              />
              <div>
                <p class="text-sm font-medium">{{ item.goodsInfo.title }}</p>
                <p class="text-xs text-gray-500">x{{ item.num }}</p>
              </div>
            </div>
            
            <div class="flex items-center text-blue-600">
              <el-icon class="text-lg"><Plus /></el-icon>
            </div>
            
            <div class="flex items-center space-x-2">
              <img 
                :src="item.freeGoodsInfo.mainPic || '/images/no.jpg'" 
                :alt="item.freeGoodsInfo.title"
                class="w-12 h-12 object-cover rounded-lg border-2 border-red-300"
              />
              <div>
                <p class="text-sm font-medium text-red-600">{{ item.freeGoodsInfo.title }}</p>
                <p class="text-xs text-red-500">赠品 x{{ item.freeNum }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Savings display -->
      <div v-if="savings > 0" class="mt-4 p-3 bg-gradient-to-r from-orange-100 to-red-100 rounded-lg">
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-700">您可节省</span>
          <span class="text-lg font-bold text-red-600">¥{{ savings.toFixed(2) }}</span>
        </div>
      </div>

      <!-- Action buttons -->
      <div class="mt-6 flex space-x-3">
        <button 
          @click="viewDetails"
          class="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
        >
          查看详情
        </button>
        <button 
          @click="addToCart"
          :disabled="!isValid"
          :class="actionButtonClass"
          class="flex-1 py-2 px-4 rounded-lg font-medium transition-all duration-200"
        >
          {{ actionButtonText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Clock, Plus } from '@element-plus/icons-vue'
import type { Promotion, ComboPromotion, SeckillPromotion } from '@/api/modules/promotion'
import { getStockStatusText, getStockStatusClass } from '@/lib/stockUtils'

const props = defineProps<{
  promotion: Promotion
}>()

const emit = defineEmits<{
  viewDetails: [promotion: Promotion]
  addToCart: [promotion: Promotion]
}>()

// Computed properties
const isValid = computed(() => {
  const now = new Date()
  const startTime = new Date(props.promotion.startTime)
  const endTime = new Date(props.promotion.endTime)
  return props.promotion.status === 1 && now >= startTime && now <= endTime
})

const statusText = computed(() => {
  const now = new Date()
  const startTime = new Date(props.promotion.startTime)
  const endTime = new Date(props.promotion.endTime)
  
  if (props.promotion.status === 0) return '已停用'
  if (now < startTime) return '未开始'
  if (now > endTime) return '已结束'
  return '进行中'
})

const statusBadgeClass = computed(() => {
  if (!isValid.value) return 'bg-gray-500 text-white'
  return 'bg-green-500 text-white'
})

const typeLabel = computed(() => {
  const labels = {
    TC: '套餐',
    MJ: '满减',
    MS: '秒杀',
    MZ: '买赠'
  }
  return labels[props.promotion.promType]
})

const typeBadgeClass = computed(() => {
  const classes = {
    TC: 'bg-gradient-to-r from-purple-500 to-pink-500',
    MJ: 'bg-gradient-to-r from-green-500 to-emerald-500',
    MS: 'bg-gradient-to-r from-red-500 to-orange-500',
    MZ: 'bg-gradient-to-r from-blue-500 to-cyan-500'
  }
  return classes[props.promotion.promType]
})

const headerGradientClass = computed(() => {
  const classes = {
    TC: 'bg-gradient-to-br from-purple-500 via-pink-500 to-purple-600',
    MJ: 'bg-gradient-to-br from-green-500 via-emerald-500 to-green-600',
    MS: 'bg-gradient-to-br from-red-500 via-orange-500 to-red-600',
    MZ: 'bg-gradient-to-br from-blue-500 via-cyan-500 to-blue-600'
  }
  return classes[props.promotion.promType]
})

const totalPrice = computed(() => {
  if (props.promotion.promType === 'TC') {
    const combo = props.promotion as ComboPromotion
    return combo.totalPrice || combo.details.reduce((sum, item) => sum + (item.taxprice * item.num), 0)
  }
  return 0
})

const originalPrice = computed(() => {
  if (props.promotion.promType === 'TC') {
    const combo = props.promotion as ComboPromotion
    return combo.details.reduce((sum, item) => sum + (item.goodsInfo.price * item.num), 0)
  }
  return 0
})

const savings = computed(() => {
  if (props.promotion.promType === 'TC') {
    return originalPrice.value - totalPrice.value
  }
  if (props.promotion.promType === 'MS') {
    const seckill = props.promotion as SeckillPromotion
    return seckill.details.reduce((sum, item) => 
      sum + ((item.goodsInfo.price - item.seckillPrice) * item.seckillNum), 0
    )
  }
  return 0
})

const actionButtonClass = computed(() => {
  if (!isValid.value) {
    return 'bg-gray-300 text-gray-500 cursor-not-allowed'
  }
  
  const classes = {
    TC: 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg hover:shadow-xl',
    MJ: 'bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white shadow-lg hover:shadow-xl',
    MS: 'bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white shadow-lg hover:shadow-xl',
    MZ: 'bg-gradient-to-r from-blue-500 to-cyan-500 hover:from-blue-600 hover:to-cyan-600 text-white shadow-lg hover:shadow-xl'
  }
  return classes[props.promotion.promType]
})

const actionButtonText = computed(() => {
  if (!isValid.value) {
    const now = new Date()
    const startTime = new Date(props.promotion.startTime)
    const endTime = new Date(props.promotion.endTime)
    
    if (props.promotion.status === 0) return '已停用'
    if (now < startTime) return '未开始'
    if (now > endTime) return '已结束'
    return '活动已结束'
  }
  
  const texts = {
    TC: '加入购物车',
    MJ: '去购物',
    MS: '立即抢购',
    MZ: '立即购买'
  }
  return texts[props.promotion.promType]
})

// Methods
const formatDateRange = (start: string, end: string) => {
  const startDate = new Date(start)
  const endDate = new Date(end)
  const formatDate = (date: Date) => {
    return `${date.getMonth() + 1}/${date.getDate()}`
  }
  return `${formatDate(startDate)} - ${formatDate(endDate)}`
}

const viewDetails = () => {
  emit('viewDetails', props.promotion)
}

const addToCart = () => {
  if (isValid.value) {
    emit('addToCart', props.promotion)
  }
}
</script>

<style scoped>
.promotion-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}
</style> 